<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello</title>
</head>
<body>

<div id="root"></div>

<script src="../lib/react.js"></script>
<script src="../lib/react-dom.js"></script>
<script src="../lib/babel-min.js"></script>

<script type="text/babel">
  //类组件
  class App extends React.Component {

    //组件数据
    constructor() {
      super();                 //继承的类需要在构造方法中调用super
      this.state = {
        message: "Hello React" //参与界面的数据一律放到state中
      }
      //方案2：对需要绑定的方法，提前绑定好this
      this.btnClick = this.btnClick.bind(this)
    }

    //组件方法
    btnClick() {
      //默认绑定 => window / 严格模式下是undefind => 默认情况下在ES6 class里定义的所有函数都是严格模式, 所以直接使用this会undefined
      // console.log(this);

      //内部完成了两件事情，将state中值message修改掉，重新渲染界面
      this.setState({
        message: "test",
      })
    }

    //组件内容
    render() {
      return (
        <div>
          <h2>{this.state.message}</h2>
          {/* 方案1：必须要手动绑定this */}
          <button onClick={this.btnClick.bind(this)}>修改文本</button>
        </div>
      )
    }
  }

  const root = ReactDOM.createRoot(document.querySelector("#root"))
  root.render(<App/>)

</script>

</body>
</html>
